@extends('layout.master')

@section('content-header')
    <h1>Penduduk</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ URL::to('penduduk') }}"><i class="fa fa-group"></i>Penduduk</a></li>
        <li class="active"><i class="fa fa-search"></i> Hasil Pencarian</li>
    </ol>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body table-responsive">
                {{ Form::open(array('route'=>array('penduduks.result'), 'method'=>'POST', 'class'=>'form-horizontal', 'role'=>'form')) }}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Pekerjaan</label>
                        <div class="col-sm-10">
                            @foreach ($jenispekerjaans as $key => $jenispekerjaan)
                                {{ Form::checkbox('jenis_pekerjaan_id[]', $key, false, array('class'=>'form-control')) }}
                                {{ Form::label($jenispekerjaan) }}
                                <br>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Umur</label>
                        <div class="col-sm-10" id="blue">
                            <input id="umur-awal" name="umur_awal" value="0" disabled="disabled" class="form-control">
                            <span id="sampai" class="form-control">s/d</span>
                            <input id="umur-akhir" name="umur_akhir" value="150" disabled="disabled" class="form-control">
                            <br><br>
                            <input class="col-sm-6" type="text" value="" data-slider-min="0" data-slider-max="150" data-slider-value="[0,150]" id="slider" data-slider-tooltip="hide">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            {{ HTML::decode(Form::button('<i class="fa fa-refresh"></i> Reset', array('class'=>'btn btn-success','type'=>'reset'))) }}
                            {{ HTML::decode(Form::button('<i class="fa fa-search"></i> Cari', array('class'=>'btn btn-primary','type'=>'submit'))) }}
                        </div>
                    </div>
                {{ Form::close() }}
            </div>
        </div>
        <div class="box">
            <div class="box-body table-responsive">
                {{ HTML::decode(link_to_route('penduduks.check', '<i class="fa fa-plus-square"></i> Tambah Data', null, array('class'=>'btn btn-primary'))) }}
                {{ HTML::decode(link_to_route('penduduks.index', '<i class="fa fa-search"></i> Tutup Pencarian', null, array('class'=>'btn btn-warning'))) }}
                <table id="my-table" class="table table-bordered table-striped">
                    <thead>
                        <tr class="center">
                            <th>#</th>
                            <th>NIK</th>
                            <th>Nama</th>
                            <th>Jenis Kelamin</th>
                            <th>Pekerjaan</th>
                            <th>Pendidikan</th>
                            <th>Status keluarga</th>
                            <th width="10%">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $i = 1 ?>
                        @foreach ($penduduks as $penduduk)
                            <tr>
                                <td class="center">{{ $i }}</td>
                                <td class="center">{{ $penduduk->nik }}</td>
                                <td>{{ $penduduk->nama }}</td>
                                <td class="center">{{ $penduduk->jenis_kelamin }}</td>
                                <td class="center">{{ ($penduduk->jenisPekerjaan) ? $penduduk->jenisPekerjaan->nama : 'nothing to show'}}</td>
                                <td class="center">{{ ($penduduk->pendidikan) ? $penduduk->pendidikan->nama : 'nothing to show'}}</td>
                                <td class="center">{{ ($penduduk->statusKeluarga) ? $penduduk->statusKeluarga->nama : 'nothing to show'}}</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="#" class="btn btn-default btn-detail" data-nik="{{ $penduduk->nik }}" data-nama="{{ $penduduk->nama }}" data-keterangan="{{ $penduduk->keterangan }}"><i class="fa fa-list text-danger" data-toggle="tooltip" data-placement="top" data-original-title="Detail"></i></a>
                                        {{ HTML::decode(link_to_route('penduduks.edit', '<i class="fa fa-pencil text-warning"></i>', $penduduk->id, array('class'=>'btn btn-default btn-edit'))) }}
                                        <a href="#" class="btn btn-default btn-delete" data-form='{{Form::model($penduduk,array('route'=>array('penduduks.destroy',$penduduk->id),'method'=>'DELETE','class'=>'formDelete'))}}{{Form::close()}}'><i class="fa fa-times text-danger"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <?php $i++ ?>
                        @endforeach
                    </tbody>
                </table>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    $(function() {
        $('#slider').slider().on('slide', function(ev){
            var value = $('#slider').slider('getValue');
            $('#umur-awal').val(ev.value[0]);
            $('#umur-akhir').val(ev.value[1]);
        });

        $('#my-table').dataTable({
            "bPaginate": true,
            "bLengthChange": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false
        });

        $('.btn-delete').click(function(event) {
            event.preventDefault(); 
            formDelete = $(this).data('form');
            bootbox.confirm('Yakin hapus data ini?'+formDelete, function(yes){
                if(yes) {
                    $('.formDelete').submit();
                }
            });
        });

        $('.table-responsive').on('click', '.btn-detail', function(event) {
            event.preventDefault();
            var detail = '<table class="table"><tr><td width="10%">NIK</td><td width="2%">:</td><td>'+$(this).data('nik')+'</td></tr>';
            detail += '<tr><td>Nama</td><td>:</td><td>'+$(this).data('nama')+'</td></tr>';
            detail += '<tr><td>Keterangan</td><td>:</td><td>'+$(this).data('keterangan')+'</td></tr></table>';
            bootbox.dialog({
                message: detail,
                title: 'Detail Penduduk',
                buttons: {
                    main: {
                        label: "OK",
                        className: "btn-primary"
                    }
                }
            });
        });

    });
</script>
@stop